<template>
	<view>
		<view class="search-wrap flex rcb">
			<view class="search-input-view flex rcs">
				<text class="search-icon cuIcon-search"></text>
				<input type="text" placeholder="请输入企业名称" v-model="name" class="ipt search-input" />
			</view>
			<view class="btn-item search-btn-item" @tap="_onRefresh">搜索</view>
		</view>
		<view class="content">
			<view class="scroll-v list" v-if="list.length > 0">
				<block v-for="(item,index) in list" :key="index">
					<view class="station-item">
						<view class="top-bigbox">
							<view class="todo">{{item.company_name}}</view>
							<view class="flex">
								<view class="men-name">驻企人员:</view>
								<view class="names">{{item.user_name}}</view>
							</view>
							<image class="img-bg-style" src="../../static/icon/icon_package.png" mode="widthFix" />
						</view>
						<view class="flex rcb btm-bigbox">
							<view class="btn-left-con flex rcs">
								<view class="btn-item flex rcc del-box" @tap="handleClickDel(item.id)">
									<image class="btn-icon" src="../../static/icon/icon_trash.png" mode="widthFix" />
									<text class="btn-title">删除</text>
								</view>
								<view class="btn-item flex rcc change-box" @tap="handleClickChange(item)">
									<image class="btn-icon" src="../../static/icon/icon_edit.png" mode="widthFix" />
									<text class="btn-title">编辑</text>
								</view>
							</view>
							<view class="look-box" @tap="handleClickRecruit(item)">
								查看企业人才
							</view>
						</view>
					</view>
				</block>
				<view class="loadStatus">{{loadStatus}}</view>
			</view>
			<loading v-else-if="firstload"></loading>
			<!-- 无内容默认 -->
			<no-thing v-else></no-thing>
		</view>
		<view class="cu-modal show" v-if="showConfirm">
		    <view class="cu-dialog dialog-container">
		        <view class="cu-bar dialog-title-view flex rcb">
		            <view class="dialog-title-style">温馨提示</view>
		            <view class="dialog-btn-close" @tap="onPressCancel">
		                <text class="cuIcon-close"></text>
		            </view>
		        </view>
		        <view class="dialog-content-view flex ccc">
		            <view class="dialog-context flex ccc">确定要删除吗？</view>
		        </view>
		        <view class="cu-bar dialog-btn-wrap flex rcb">
		            <view class="btn-item btn-cancel-item flex ccc" @tap="onPressCancel">取消</view>
		            <view class="btn-item btn-submit-item flex ccc" @tap="onPressSubmit">确定</view>
		        </view>
		    </view>
		</view>
	</view>
</template>

<script>
	import loading from "../../components/common/loading.vue";
	import noThing from "../../components/common/no-thing.vue";
	export default {
		components: {
			loading,
			noThing,
		},
		data() {
			return {
				item_id: '',
				name: '',
				showConfirm: false,
				firstload: true,
				loadStatus: "",
				msg: '',
				token: '',
				page: 1,
				limit: 10,
				list: [],
			}
		},
		onReachBottom() {
			// console.log('_onLoadMore---->', '_onLoadMore');
			this.loadMore();
		},
		onLoad() {
			// uni.startPullDownRefresh();
		},
		onPullDownRefresh() {
			this._onRefresh();
			// console.log('refresh');
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		// 监听原生标题导航按钮点击事件
		onNavigationBarButtonTap(e) {
			// console.log(e.index)
			switch (e.index) {
				case 0:
					// 打开发布页面
					uni.navigateTo({
						url: '/pages/publish/addStation'
					})
					break;
			}
		},
		methods: {
			onPressCancel() {
			    this.showConfirm = false;
			},
			async onPressSubmit() {
			    let url = this.ServicesApi.delStation;
			    let data = {
			        id: this.item_id,
			    };
			    let result = await this.Services.post(url, data);
			    if (result.code == this.StatusCode.SUCCESS_CODE) {
			        uni.showToast({
			            icon: 'none',
						title: result.msg,
			        });
			        this.showConfirm = false;
			        this._onRefresh();
			    } else {
			        uni.showToast({
			            icon: 'none',
			            title: result.msg,
			        });
			    }
			},
			_onRefresh() {
				this.page = 1;
				this.getList();
				// console.log('_onRefresh---->', '_onRefresh');
			},
			// 取token
			getToken() {
				try {
					const value = uni.getStorageSync('login_key');
					if (value) {
						this.token = value;
					}
				} catch (e) {
					// error
				}
			},
			// 点击查看企业人才
			handleClickRecruit(item) {
				// console.log(item)
				let company_id = item.company_id
				uni.navigateTo({
					url: '/pages/talent_pool/my_talent_list?company_id=' + company_id
				})
			},
			// 点击新增跳转新增页面
			handleClickAdd() {
				uni.navigateTo({
					url: '/pages/publish/addStation'
				})
			},
			// 点击修改跳页面传参数
			handleClickChange(item) {
				// console.log(item);
				let items = JSON.stringify(item)
				uni.navigateTo({
					url: '/pages/publish/addStation?items=' + items
				})
			},
			// 点击删除
			handleClickDel(id) {
				this.item_id = id;
				this.showConfirm = true;
				return;
				// console.log(id);
				this.getToken()
				// 发请求
				uni.showModal({
					title: '温馨提示',
					content: '确认要删除吗？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					success: async res => {
						if (res.confirm) {
							let url = this.ServicesApi.delStation;
							let data = {
								id,
							};
							let result = await this.Services.post(url, data);
							if (result.code == this.StatusCode.SUCCESS_CODE) {
								uni.showToast({
									icon: 'none',
									title: result.msg,
								});
								this._onRefresh();
							} else {
								uni.showToast({
									icon: 'none',
									title: result.msg,
								});
							}
						} else if (res.cancel) {

						}
					}
				});

			},
			// 请求岗位参数
			async getList() {
				// 发请求
				let url = this.ServicesApi.stationIndex;
				let data = {
					name: this.name,
					user_id: '', //搜索用户id 用户列表接口
					company_id: '', //搜索企业id 企业列表接口
					page: this.page,
					limit: this.limit,
				};
				let result = await this.Services.post(url, data);
				if (result.code == this.StatusCode.SUCCESS_CODE) {
					this.list = result.data.list;
					this.firstload = false;
				} else {
					this.firstload = false;
					uni.stopPullDownRefresh();
				}

			},
			// 上拉加载
			async loadMore() {
				this.loadStatus = "加载中..."
				this.page++;
				// console.log(this.page)
				this.getToken();
				// 发请求
				let url = this.ServicesApi.stationIndex;
				let data = {
					name: this.name,
					user_id: '', //搜索用户id 用户列表接口
					company_id: '', //搜索企业id 企业列表接口
					page: this.page,
					limit: this.limit,
				};
				let result = await this.Services.post(url, data);
				if (result.code == this.StatusCode.SUCCESS_CODE) {
					let arr = result.data.list;
					this.list.push(...arr)
					if (arr.length < 10) {
						this.loadStatus = "没有更多数据"
					}
				} else {
					this.loadStatus = "没有更多数据"
				}
			},
		},
		mounted() {
			this.getList()
		},
		onShow: function(e) {
			// #ifndef H5
			let pages = getCurrentPages();
			let currPage = pages[pages.length - 1];
			if (currPage.data && currPage.data.isDoRefresh == true) {
				currPage.data.isDoRefresh = false;
				// console.log('s刷新');
				this._onRefresh();
			} else {
				//不用刷新
			}
			// #endif
			// #ifdef H5
			this._onRefresh()
			// #endif
		}
	}
</script>

<style scoped lang="stylus">
	.loadStatus {
		height: 60upx;
		color: #ccc;
		font-size: 30upx;
		text-align: center;
		line-height: 60upx;
		margin-bottom: 20upx;
	}
	
	.content {
		padding-top: 100rpx;
	}

	.scroll-v {
		height: 100vh;
	}

	.station-item {
		background: #fff;
		padding: 20rpx 30rpx;
		margin: 20rpx 30rpx 0;
	}

	.top-bigbox {
		position: relative;
		.img-bg-style {
			top: 0rpx;
			right: 10rpx;
			width: 100rpx;
			height: 100rpx;
			position: absolute;
		}
		.todo {
			color: #333333;
			font-size: 36upx;
			margin-bottom: 16upx;
		}

		.men-name {
			color: #666666;
			font-size: 30upx;
			margin-right: 20upx;
		}

		.names {
			font-size: 30upx;
			color: #333333;
		}

	}

	.btm-bigbox {
		background: #fff;
		margin-top: 20rpx;
		padding-top: 20rpx;
		align-items: center;
		border-top: 1upx solid #DBDBDB;
		.btn-item {
			margin-right: 40rpx;
			.btn-title {
				color: #666666;
				font-size: 28rpx;
			}
			.btn-icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}
		}

		.look-box {
			width: 228upx;
			height: 64upx;
			background: linear-gradient(270deg, rgba(0, 106, 231, 1) 0%, rgba(66, 157, 255, 1) 100%);
			border-radius: 6rpx;
			text-align: center;
			line-height: 64upx;
			color: #fff;
			font-size: 28upx;
		}
	}
	.search-wrap {
		height: 100rpx;
		padding: 0 30rpx;
		/* #ifndef H5 */
			top: 0;
		/* #endif */
		left: 0;
		right: 0;
		z-index: 99;
		position: fixed;
		background: #e7e7e7;
	
		.search-input-view {
			flex: 1;
			height: 70rpx;
			padding: 0 20rpx;
			margin-right: 20rpx;
			border-radius: 10rpx;
			background-color: #FFFFFF;
	
			.search-icon {
				color: #999999;
				font-size: 32rpx;
				margin-right: 10rpx;
			}
	
			.search-input {
				flex: 1;
				text-indent: 20rpx;
				margin-right: 20rpx;
			}
		}
	
		.search-btn-item {}
	}
</style>
